﻿@model OnlineViewModel

@functions {
	string GetMinTime() {
		var now = DateTime.Now.TimeOfDay;
		TimeSpan timespan;

		if (now.Minutes >= 30) {
			timespan = new TimeSpan(0, now.Hours + 1, 0, 0);

			if (now.Hours + 1 >= 24)
			{
				timespan = new TimeSpan(0, 0, 0, 0);
			}
		}
		else {
			timespan = new TimeSpan(0, now.Hours, 30, 0);
		}

		return DateTime.Today.Add(timespan).ToString("hh:mm tt");
	}
}

<script type="text/javascript">
    function saveStepData() {

        window.OnlineContent.BroadcastType = $("input[type='radio']:checked")[0].id;
        window.OnlineContent.BroadcastDescription = $("#BroadcastDescription").val();
        window.OnlineContent.ManualStartTime = $("#ManualStartTime").val();
        window.OnlineContent.StartTime = $("#StartTime").val();
        window.OnlineContent.EndTime = $("#EndTime").val();
        window.OnlineContent.ManualStartDate = $("#ManualStartDate").val();
        window.OnlineContent.StartDate = $("#StartDate").val();
        window.OnlineContent.EndDate = $("#EndDate").val();
    }
    function checktime() {
        var tm = $("#ManualStartTime").val();
        var dt = $("#ManualStartDate").val();
        var dtt = new Date(dt + " " + tm);
        var dttCur = new Date();
        var delta = dtt - dttCur;
        if (!dtt || delta == "NaN")
            return false;
        if (delta / 1 < 0)
            return false;
        return true;
    }
    $.validator.addMethod("ctimes", function (value, element, v) {
        return checktime();
    }, "Check time please");
    function loadStepData() {

        $("#wizard form").validate({
            rules: {
                //BroadcastDescription: { required: "#selfBroadcast:checked" },
                ManualStartTime: { required: "#selfBroadcast:checked", ctimes: "" },
                ManualStartDate: { required: "#selfBroadcast:checked", ctimes: "" },
                StartTime: { required: "#timeBroadcast:checked" },
                EndTime: { required: "#timeBroadcast:checked" },
                StartDate: { required: "#timeBroadcast:checked" },
                EndDate: { required: "#timeBroadcast:checked" }
            },
            messages: {
                //	BroadcastDescription: { required: "@Html.GetGlobalResource("OnlineWizard", "BroadcastDescriptionRequired")" },
			    ManualStartTime: { required: "@Html.GetGlobalResource("OnlineWizard", "StartTimeRequired")", ctimes: "@Html.GetGlobalResource("OnlineWizard", "StartTimeRequired")" },
			    ManualStartDate: { required: "@Html.GetGlobalResource("OnlineWizard", "StartDateRequired")", ctimes: "@Html.GetGlobalResource("OnlineWizard", "StartDateRequired")" },
			    StartTime: { required: "@Html.GetGlobalResource("OnlineWizard", "StartTimeRequired")" },
			    EndTime: { required: "@Html.GetGlobalResource("OnlineWizard", "EndTimeRequired")" },
			    StartDate: { required: "@Html.GetGlobalResource("OnlineWizard", "StartDateRequired")" },
			    EndDate: { required: "@Html.GetGlobalResource("OnlineWizard", "EndDateRequired")" },
			},
		    errorPlacement: function (error, element) {
		        $(".validation").append(error);
		        $(".validation").append("<br/>");
		    }
		});

        $("input[type='radio']").change(function () {
            switchBroadcasting();
        });
        $("#selfBroadcast").attr("checked", "checked");

        $("#ManualStartTime").timepicker({
            minTime: '@GetMinTime()',
		    timeFormat: 'H:i',
		    step: 30
		});
        $("#StartTime").timepicker({
            minTime: '@GetMinTime()',
		    timeFormat: 'h:i A',
		    step: 30
		});
        $("#EndTime").timepicker({
            timeFormat: 'h:i A',
            step: 30
        });
        $("#ManualStartDate").datepicker({
            showAnim: "fadeIn",
            dateFormat: 'dd MM yy',
            minDate: 0,
            firstDay: 1,
            changeMonth: true,
            changeYear: true,
            gotoCurrent: true
        });
        $("#StartDate").datepicker({
            showAnim: "fadeIn",
            dateFormat: 'dd MM yy',
            minDate: 0,
            firstDay: 1,
            changeMonth: true,
            changeYear: true,
            gotoCurrent: true,
            onClose: function (selectedDate) {
                $("#EndDate").datepicker("option", "minDate", selectedDate);
            }
        });
        $("#EndDate").datepicker({
            showAnim: "fadeIn",
            dateFormat: 'dd MM yy',
            minDate: 0,
            firstDay: 1,
            changeMonth: true,
            changeYear: true,
            gotoCurrent: true,
            onClose: function (selectedDate) {
                $("#StartDate").datepicker("option", "maxDate", selectedDate);
            }
        });

        if (window.OnlineContent.BroadcastType && window.OnlineContent.BroadcastType != "") {
            $("#" + window.OnlineContent.BroadcastType).attr("checked", "checked");
        }
        if (window.OnlineContent.BroadcastDescription) {
            $("#BroadcastDescription").val(window.OnlineContent.BroadcastDescription);
        }
        if (window.OnlineContent.ManualStartTime) {
            $("#ManualStartTime").val(window.OnlineContent.ManualStartTime);
        }
        if (window.OnlineContent.StartTime) {
            $("#StartTime").val(window.OnlineContent.StartTime);
        }
        if (window.OnlineContent.EndTime) {
            $("#EndTime").val(window.OnlineContent.EndTime);
        }
        if (window.OnlineContent.ManualStartDate) {
            $("#ManualStartDate").val(window.OnlineContent.ManualStartDate);
        }
        if (window.OnlineContent.StartDate) {
            $("#StartDate").val(window.OnlineContent.StartDate);
        }
        if (window.OnlineContent.EndDate) {
            $("#EndDate").val(window.OnlineContent.EndDate);
        }

        switchBroadcasting();
    }

    function switchBroadcasting() {
        $("#BroadcastDescription").attr("disabled", true);
        $("#ManualStartTime").attr("disabled", true);
        $("#StartTime").attr("disabled", true);
        $("#EndTime").attr("disabled", true);
        $("#ManualStartDate").attr("disabled", true);
        $("#StartDate").attr("disabled", true);
        $("#EndDate").attr("disabled", true);

        if ($("#selfBroadcast").length > 0 && $("#selfBroadcast")[0].checked) {
            $("#BroadcastDescription").removeAttr("disabled");
            $("#ManualStartTime").removeAttr("disabled");
            $("#ManualStartDate").removeAttr("disabled");
        }
        if ($("#timeBroadcast").length > 0 && $("#timeBroadcast")[0].checked) {
            $("#StartTime").removeAttr("disabled");
            $("#EndTime").removeAttr("disabled");
            $("#StartDate").removeAttr("disabled");
            $("#EndDate").removeAttr("disabled");
        }
    }
</script>

<form>
    <div class="steps"><h4>Step 4 of 5</h4></div>
	<h3 id="broadcastingTitle">@Html.GetGlobalResource("OnlineWizard", "Broadcasting")</h3>
	<div class="validation"></div>

	<input id="selfBroadcast" style="display:none;" type="radio" name="BroadcastType"/><label style="display:none;" 
        for="selfBroadcast">@Html.GetGlobalResource("OnlineWizard", "SwitchMyself")</label>
	
	<textarea id="BroadcastDescription" name="BroadcastDescription" rows="4" style="display:none; width:100%; font-size: 13px;" />
	<label class="wz_s4_lbl_start">@Html.GetGlobalResource("OnlineWizard", "Start")</label>@Html.TextBox("ManualStartTime")@Html.TextBox("ManualStartDate")
	<div style ="display:none;">
	<input id="timeBroadcast" type="radio" name="BroadcastType"/><label for="timeBroadcast">@Html.GetGlobalResource("OnlineWizard", "StartsAutomatically")</label>
	<label>@Html.GetGlobalResource("OnlineWizard", "Start")</label>&nbsp;@Html.TextBox("StartTime")&nbsp;@Html.TextBox("StartDate")
	<label>@Html.GetGlobalResource("OnlineWizard", "End")</label>&nbsp;@Html.TextBox("EndTime")&nbsp;@Html.TextBox("EndDate")
	</div>
</form>